<template>
    <el-dialog :visible.sync="visible" width="700px" :append-to-body="true" :before-close="handleClose">
        <div class="position-relative">
            <div>您可以联系悟空官方开通悟空呼叫中心服务。开通后您可以获得以下服务：</div>
            <flexbox class="phone-info">
                <img src="@/assets/img/system/app/phone.png" />
                官方服务热线：400-0812-558
            </flexbox>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="name" label="功能" width="180">
                </el-table-column>
                <el-table-column prop="des" label="功能描述">
                </el-table-column>
            </el-table>
            <div class="switch">
                <el-switch v-model="callSwitch" disabled>
                </el-switch>
                未启用
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleClose">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: 'call-detail',
    components: {},
    data() {
        return {
            tableData: [
                {
                    name: '一键外呼',
                    des: '在系统中点击拨号按钮就可以实现一键外呼。'
                },
                {
                    name: '呼入弹屏',
                    des: '客户来电，自动匹配系统客户，一键查看客户信息。'
                },
                {
                    name: '通话录音',
                    des: '通话自动录音，支持在线播放和下载。'
                },
                {
                    name: '通话记录',
                    des: '自动生成通话记录，可以随时查看通话时长、通话时间等信息。'
                }
            ],
            callSwitch: false
        }
    },
    computed: {},
    props: {
        visible: {
            type: Boolean,
            default: false
        }
    },
    mounted() { },
    methods: {
        handleClose() {
            this.$emit('update:visible', false)
        }
    }
}
</script>

<style scoped lang="scss">
.position-relative {
    position: relative;
}

.phone-info {
    margin: 15px 0;
    img {
        width: 16px;
        margin-right: 5px;
    }
}

.switch {
    color: #666666;
    font-size: 13px;
    position: absolute;
    left: 0;
    bottom: -30px;
}
</style>
